<template>
  <el-dialog
    :visible.sync="dialogVisible"
    top="10vh"
    append-to-body
    :close-on-click-modal="false"
    class="tag-edit-dialog monitor-log-dialog"
    width="50%"
    @closed="clearDialog"
    v-dialogMove
  >
    <div slot="title">
      <tag-content-header>
        <template #title>
          <span class="title-text">日志</span>
        </template>
      </tag-content-header>
    </div>
    <textarea :id="'monitor-log-' + type"></textarea>
    <span slot="footer" class="dialog-footer">
      <el-button @click="clearLog">清空日志</el-button>
      <el-button :type="connection ? '' : 'primary'" @click="handleClose">{{
        connection ? '断开连接' : '打开连接'
      }}</el-button>
      <el-button type="primary" @click="dialogVisible = false">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import CodeMirror from 'codemirror'
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
export default {
  data() {
    return {
      dialogVisible: false,
      log: '',
      logNm: '',
      type: '',
      length: 2000,
      num: 1,
      stompClient: null,
      editor: null
    }
  },
  computed: {
    connection() {
      return this.stompClient
    }
  },
  methods: {
    showDialog(logNm) {
      this.dialogVisible = true
      this.logNm = logNm
      this.getLog()
      // 建立连接
      this.connectSocket()
    },
    connectSocket() {
      const socketUrl = window.TAG_CONFIG['socketUrl']
      const socket = new SockJS(socketUrl + 'logs')
      //  获取STOMP子协议的客户端对象
      this.stompClient = Stomp.over(socket)
      // 向服务器发起websocket连接
      this.stompClient.connect({}, () => {
        // 订阅和接收
        this.stompClient.subscribe(`/user/${this.logNm}/logs/detail`, data => {
          this.setLog(data.body)
        })
        this.stompClient.send('/app/getLog', {}, this.logNm)
      })
    },
    disConnect() {
      if (this.stompClient != null) {
        this.stompClient.disconnect()
        this.stompClient = null
      }
    },
    getLog() {
      this.$ajax({
        url: this.$ajax.setUrl('tagLog/log'),
        method: 'get',
        params: this.$ajax.setParams({
          logNm: this.logNm
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dialogVisible = true
          this.$nextTick(() => {
            this.setLog(data.data || '')
          })
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    setLog(log) {
      if (!this.editor) {
        this.editor = CodeMirror.fromTextArea(document.getElementById('monitor-log-' + this.type), {
          mode: 'java',
          lineNumbers: true,
          readOnly: true,
          lineWrapping: true
        })
        this.log = log
        this.editor.setValue(this.log)
      } else {
        this.log = this.log + '' + log
        this.editor.replaceRange(log, { line: this.editor.lastLine() })
        let last_line = this.editor.lastLine()
        this.editor.scrollIntoView({ line: last_line })
      }
    },
    closeLog(showInfo = true) {
      this.$ajax({
        url: this.$ajax.setUrl('tagLog/close'),
        method: 'get',
        params: this.$ajax.setParams(),
        timeout: 0
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (showInfo) {
            this.disConnect()
            this.$message.success(data.msg)
          }
        } else {
          if (showInfo) this.$message.error(data.data || data.msg)
        }
      })
    },
    handleClose() {
      if (this.connection) this.closeLog()
      else {
        this.getLog()
        this.connectSocket()
      }
    },
    clearLog() {
      this.log = ''
      this.editor.setValue(this.log)
    },
    clearDialog() {
      // 断开连接
      this.dialogVisible = false
      this.disConnect()
      this.closeLog(false)
      this.log = ''
      this.logNm = ''
      this.num = 1
      if (this.editor) {
        this.editor.toTextArea()
        this.editor = null
      }
    }
  }
}
</script>

<style lang="scss">
.monitor-log-dialog {
  .CodeMirror {
    border: 1px solid $border-color;
  }
}
</style>
